<script setup lang="ts">
import MenuList from './page/MenuList/index.vue'
import NavBar from './page/NavBar/index.vue'
import { DiyRouter } from './components'
/**
 *  左侧菜单打开状态
 * */
const isOpen = ref<boolean>(true)
const isOpenChange = () => {
  isOpen.value = !isOpen.value
}

provide('isOpen', readonly(isOpen))
provide('isOpenChange', isOpenChange)

/**
 *  页面宽度低于900自动收起大于900展开
 * */
const { width } = useWindowSize()
watchEffect(() => {
  if (width.value >= 900) {
    isOpen.value = true
  } else {
    isOpen.value = false
  }
})
</script>
<template>
  <div class="layout-page">
    <MenuList />
    <div class="ymain flex">
      <NavBar :width="width" />
      <div class="content">
        <DiyRouter superiorName="Root" />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.layout-page {
  flex: 1 0 0;
  display: flex;
  background: var(--yang-bg-color);
  position: relative;
  .ymain {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    .content {
      flex: 1;
      position: relative;
    }
  }
}
</style>
